import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { DownOutlined, PlusOutlined,InfoCircleOutlined } from '@ant-design/icons';
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio, Card, Col,message,Row,Tooltip,Checkbox,DatePicker} from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState, useEffect} from 'react';
import { queryRule, updateRule, addRule, removeRule } from '../service';
import styles from './style.less';
import DataLang from './DataLang';
import CryptoJS from 'crypto-js';

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;

const { RangePicker } = DatePicker;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  // dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
  obj: any
}

// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const { form, common, isUpdate,dataFormValues,obj } = props;

  const parseData = (key:any,options:any) => {
    // console.log(options);
    var name:any = "";
    if(Array.isArray(options) && options.length>0){
      options.map(item=>{
        if(item.alias_key == key){
          name = item?.item_value;
        }
      })
    }
    return name
  }

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [iconUrl, setIconUrl] = useState<any>(parseData('site_icon',dataFormValues));
  const [logoUrl, setLogoUrl] = useState<any>(parseData('site_logo',dataFormValues));
  const [iconUrlId, setIconUrlId] = useState<any>(parseData('site_icon',dataFormValues));
  const [logoUrlId, setLogoUrlId] = useState<any>(parseData('site_logo',dataFormValues));
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [pictureLogo, setPictureLogo] = useState<any[]>([]);
  const [uploadLogoChanged, setUploadLogoChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const [defaultIconPicture,setDefaultPicture] = useState<any>([]);
  const [dataLangModalVisible, handleDataModalVisible] = useState<boolean>(false);
  const [fieldTitle, setFieldTitle] = useState<any>('');
  const [modalName, setModalName] = useState<any>('');

  const parseDataItem = (key:any,options:any) => {
    // console.log(options);
    var obj:any = {};
    if(Array.isArray(options) && options.length>0){
      options.map(item=>{
        if(item.alias_key == key){
          obj = item;
        }
      })
    }
    return obj
  }

  const [siteNameJson, setSiteNameJson] = useState<any>(parseDataItem('site_name',dataFormValues).lang_json_arr || []);
  const [siteDescJson, setSiteDescJson] = useState<any>(parseDataItem('site_desc',dataFormValues).lang_json_arr || []);
  const [siteclosemsgJson, setSiteclosemsgJson] = useState<any>(parseDataItem('site_close_msg',dataFormValues).lang_json_arr || []);

  const [nameListLang, setnameList] = useState<any>(common?.languagesOption);
  


  //提交表单
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      //请求当前一组配置参数，tag=sites
      console.log("submit fields ", fieldsValue)
      var submitValue = [
          {
            "alias_key": 'sites',
            "item_type":'system',
            "dict_item_arr": [
              {
                "alias_key": "site_name",
                "item_value": siteNameJson.length>0 ? siteNameJson[0].lang_content : '',
                'item_type':"text",
                'lang_json': siteNameJson,
              },
              {
                "alias_key": "site_desc",
                "item_value": siteDescJson.length>0 ? siteDescJson[0].lang_content : '',
                'item_type':"textarea",
                'lang_json': siteDescJson,
              },
              
              {
                "alias_key": "site_icon",
                // "item_value": iconUrl,
                "item_value": picture.length>0?picture[0].file_id:parseData('site_icon',dataFormValues),
                'item_type':"file",
              },
              {
                "alias_key": "site_logo",
                // "item_value": logoUrl,
                "item_value": pictureLogo.length>0?pictureLogo[0].file_id : parseData('site_icon',dataFormValues),
                'item_type':"file",
              },
              {
                "alias_key": "site_copyright",
                "item_value": fieldsValue.site_copyright,
                'item_type':"text",
              },
              {
                "alias_key": "site_copyright_years",
                "item_value": fieldsValue.site_copyright_years,
                'item_type':"text",
              },
              {
                "alias_key": "default_timezone",
                "item_value": fieldsValue.default_timezone,
                'item_type':"select",
              },
              {
                "alias_key": "site_mode",
                "item_value": fieldsValue.site_mode,
                'item_type':"radio",
              },
              {
                "alias_key": "site_private_close",
                "item_value": fieldsValue.site_private_close,
                'item_type':"radio",
              },
              {
                "alias_key": "site_private_service",
                "item_value": fieldsValue.site_private_service,
                'item_type': "select",
              },
              {
                "alias_key": "site_private_end",
                "item_value": fieldsValue.site_private_end,
                'item_type': "select",
              },
              {
                "alias_key": "site_public_close",
                "item_value": fieldsValue.site_mode == "public" ? fieldsValue.site_public_close : '',
                'item_type': "radio",
              },
              {
                "alias_key": "site_public_service",
                "item_value": fieldsValue.site_mode == "public" ? fieldsValue.site_public_service : '',
                'item_type': "select",
              },
              {
                "alias_key":'register_selected',
                "item_value": fieldsValue.register_selected,
                'item_type': "checkbox",
              },
              {
                "alias_key": "site_register_email",
                "item_value": (fieldsValue.site_mode == "public" && fieldsValue.register_selected && fieldsValue.register_selected.indexOf('site_register_email')>-1) ? true : false,
                'item_type': "checkbox",
              },
              {
                "alias_key": "site_register_phone",
                "item_value": (fieldsValue.site_mode == "public" && fieldsValue.register_selected && fieldsValue.register_selected.indexOf('site_register_phone')>-1) ? true : false,
                'item_type': "radio",
              },
            ]
          }
      ]
      // 如果更新成功之后，重置表单
      updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
        console.log('handleSubmit then success is ', JSON.stringify(submitValue))
        if(res.code == 0){
          message.success('保存成功')
          // form.resetFields()
          // setPicture([]);
          // setPictureLogo([]);
        }
      })

    });
  };

  // 设置上传文件值
  const setUploadFile = (fileList:any) => {
    setUploadChanged(true)
    if(fileList.length>0 && fileList[0].response && fileList[0].response?.code != 0){
      message.error(fileList[0].response.message);
      return
    }
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
      setIconUrl(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('set picture []')
      setPicture([])
    }
  }

    // 设置Logo上传文件值
    const setLogoUploadFile = (fileList:any) => {
      console.log(picture);
      console.log(fileList);
      if(fileList.length>0 && fileList[0].response && fileList[0].response?.code != 0){
        message.error(fileList[0].response.message);
        return
      }
      setUploadLogoChanged(true)
      let fileArr = DataHelper.getLastUploadFile(fileList)
      console.log("fileArr is ", fileArr)
      if(fileArr.length > 0){
        setPictureLogo(fileArr)
        setPreviewImg(fileArr[0].file_url)
        setLogoUrl(fileArr[0].file_url);
      }else if(fileArr.length === 0){
        console.log('set picture []')
        setPictureLogo([])
      }
    }



    

    // 表单提交
    const handleSubmitDataForm = (value:any,title:any) => {
      console.log(value,241)
      setnameList(value)
      if(title == "site_name"){
        setSiteNameJson(value);
        // form.setFieldsValue('site_name',value.length>0?value[0].lang_content:'');
      }else if(title == "site_desc"){
        setSiteDescJson(value);
        // form.setFieldsValue('site_desc',value.length>0?value[0].lang_content:'');
      }else if(title == "site_close_msg"){
        setSiteclosemsgJson(value);
        // form.setFieldsValue('site_desc',value.length>0?value[0].lang_content:'');
      }
      handleDataModalVisible(false)
    }

  // 初始化变量
  const token = BdHelper.getBdToken()

  // 编辑时初始化 picture
  const defaultPicture =  DataHelper.buildFileByUrl(parseDataItem('site_icon',dataFormValues)?.item_file || '');
  const defaultLogoPicture = DataHelper.buildFileByUrl(parseDataItem('site_logo',dataFormValues)?.item_file || '');

  console.log(defaultPicture,defaultLogoPicture);

  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)
  const showUploadLogoButton = DataHelper.showUploadBtn(isUpdate, pictureLogo, defaultLogoPicture, uploadLogoChanged)

  const { Option } = Select;

  const userInfo = localStorage.getItem('user-login-info');
  let fresnsClient = eval("(" + userInfo + ")");
  const timestamp = new Date().getTime().toString().substr(0,10);
  var md5String = `appId=${fresnsClient?.app_id}&platform=${fresnsClient?.platform}&timestamp=${timestamp}&key=${fresnsClient?.app_secret}`;
  
  

  // 弹出框
  // @ts-ignore
  return <Card>
    <Row justify="start">
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="site_name" />
          {/* <em className={styles.optional}>
            
            <Tooltip title={<FormattedMessage id="你的 Fresns 站点的名称。支持多语言。" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em> */}
        </span>
      }
      // label={formatMessage({ id: 'site_name' })}
      >
        {form.getFieldDecorator('site_name', {
          initialValue: siteNameJson.length>0?siteNameJson[0].lang_content:'',
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input style={{cursor:"pointer"}} readOnly placeholder={'你的 Fresns 站点的名称。'} onClick={() => {
            setFieldTitle('site_name');
            // setModalName('')
            if(siteNameJson && siteNameJson.length>0){
              // console.log(32,common.languagesOption)
              setnameList(siteNameJson);
            }else{
              // console.log(32,common.languagesOption)
              // setnameList(common.languagesOption);
              setnameList(JSON.parse(JSON.stringify(common?.languagesOption)));
            }
            handleDataModalVisible(true);
           }}/>)}
      </FormItem>
    </Col>
    </Row>
    <Row justify="start">
    <Col span={24}>
    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
    label={
      <span>
        <FormattedMessage id="site_desc" />
        {/* <em className={styles.optional}>
          
          <Tooltip title={<FormattedMessage id="你的 TweetSNS 站点的介绍支持多语言" />}>
            <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
          </Tooltip>
        </em> */}
      </span>
    } 
    // label={formatMessage({ id: 'site_desc' })} 
    >
      {form.getFieldDecorator('site_desc', {
        initialValue: siteDescJson.length>0?siteDescJson[0].lang_content:'',
        // rules: [],
      })(<TextArea style={{cursor:"pointer"}} readOnly placeholder={'你的 Fresns 站点的介绍.'} onClick={() => {
        setFieldTitle('site_desc');
        if(siteDescJson && siteDescJson.length>0){
          setnameList(siteDescJson);
        }else{
          // setnameList(common.languagesOption);
          setnameList(JSON.parse(JSON.stringify(common?.languagesOption)));
        }
        handleDataModalVisible(true);
       }}/>)}
    </FormItem>
    </Col>
    </Row>
    
    <Row justify="start">
    <Col span={24}>
    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
    label={
      <span>
        <FormattedMessage id="site_icon" />
        {/* <em className={styles.optional}>
          <Tooltip title={<FormattedMessage id="必须配置了存储设置中的图片设置" />}>
            <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
          </Tooltip>
        </em> */}
      </span>
    } 
    >
      {form.getFieldDecorator('site_icon', {
        // initialValue: defaultPicture,
        // rules: [{required: true, message: '请上传图片'}],
      })(
        <Upload
          listType={'picture'}
          className={'upload-list-inline'}
          action="/api/admin/tweetfiles/upload"
          defaultFileList={defaultPicture}
          beforeUpload={(file) => {
            console.log('before upload file type:', file.type)
            // todo: 这里可以对上传文件类型做限制
            return true;
          }}
          data={{ table_key :'site_icon', table_type: 2}}
          onRemove={() => {setPicture([]);setIconUrl('')}}
          onChange={(changeObj) => setUploadFile(changeObj.fileList)}
          onPreview={() => {setPreviewImg(picture.length > 0 ? picture[0].file_url : parseDataItem('site_icon',dataFormValues)?.item_file || '');handlePreviewModalVisible(true);}}
          headers={{
            Authorization: `Bearer ${token}`,
            'platform': fresnsClient?.platform,
            'timestamp': timestamp,
            'appId': fresnsClient?.app_id,
            'sign':  CryptoJS.MD5(md5String).toString(),
          }}
        >
          {
            showUploadButton ? (
              <Button>
                <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
              </Button>
            ) : null
          }
        </Upload>
      )}
    </FormItem>
    </Col>
    </Row>
    <Row justify="start">
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="site_logo" />
          {/* <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="必须配置了存储设置中的图片设置" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em> */}
        </span>
      } >
        {form.getFieldDecorator('site_logo', {
          // initialValue: defaultLogoPicture,
          // rules: [{required: true, message: '请上传图片'}],
        })(
          <Upload
            listType={'picture'}
            className={'upload-list-inline'}
            action="/api/admin/tweetfiles/upload"
            defaultFileList={defaultLogoPicture}
            beforeUpload={(file) => {
              console.log('before upload file type:', file.type)
              return true;
            }}
            data={{ table_key :'site_logo' , table_type: 2 }}
            onRemove={() => {setPictureLogo([]);setLogoUrl('')}}
            onChange={(changeObj) => setLogoUploadFile(changeObj.fileList)}
            onPreview={() => {setPreviewImg(pictureLogo.length > 0 ? pictureLogo[0].file_url : parseDataItem('site_logo',dataFormValues)?.item_file || '');handlePreviewModalVisible(true);}}
            headers={{
              Authorization: `Bearer ${token}`,
              'platform': fresnsClient?.platform,
              'timestamp': timestamp,
              'appId': fresnsClient?.app_id,
              'sign':  CryptoJS.MD5(md5String).toString(),
            }}
          >
            {
              showUploadLogoButton ? (
                <Button>
                  <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                </Button>
              ) : null
            }
          </Upload>
        )}
      </FormItem>
    </Col>
    </Row>

    {/* <Row justify="start">
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="backend_url" />
        </span>
      } 
      >
        {form.getFieldDecorator('backend_url', {
          initialValue: parseData('backend_url',dataFormValues),
          rules: [{ pattern: /(http|https):\/\/([\w.]+\/?)\S*(?<![/])$/, message: '请输入合法域名,结尾不带 /'}],
        })(<Input 
        onChange={(e)=>{console.log(e.target.value)}} 
         placeholder={'后端 API 和插件默认访问地址，结尾不带 /'}/>)}
      </FormItem>
    </Col>
    </Row> */}
    <Row>
      <Col span={24}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
        label={
          <span>
            <FormattedMessage id="site_copyright" />
          </span>
        }>
          {form.getFieldDecorator('site_copyright', {
            initialValue: parseData('site_copyright',dataFormValues),
            // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
          })(<Input placeholder={'例如：BieLang Technology'}/>)}
        </FormItem>
      </Col>
    </Row>

    <Row>
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="site_copyright_years" />
          {/* <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="例如：2021" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em> */}
        </span>
      }
       >
        {form.getFieldDecorator('site_copyright_years', {
          initialValue: parseData('site_copyright_years',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input  placeholder="2011-2021" />)}
      </FormItem>
    </Col>
    </Row>
    <Row>
    <Col span={24}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
         label={
          <span>
            <FormattedMessage id="default-DateTimeZone" />
            {/* <em className={styles.optional}>
              <Tooltip title={<FormattedMessage id="默认时区的 UTC（协调世界时）" />}>
                <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
              </Tooltip>
            </em> */}
          </span>
        }
         >
          {form.getFieldDecorator('default_timezone', {
            initialValue: parseData('default_timezone',dataFormValues),
            //  rules: [{ required: true, message: '请选择！',}],
          })(<Select placeholder={'默认时区的 UTC（协调世界时）'} size={'default'} style={{ width: '100%' }}>
            {common.defaultTimezoneOption  && TsxHelper.buildSelectOption(common.defaultTimezoneOption )}
          </Select>)}
        </FormItem>
      </Col>
      </Row>
    <Row>
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
       label={
        <span>
          <FormattedMessage id="site_mode" />
          {/* <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="私有模式需要安装配套插件" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em> */}
        </span>
      } >
        {form.getFieldDecorator('site_mode', {
          initialValue: parseData('site_mode',dataFormValues) || 'public',
          // rules: [{ required: true, message: '请选择！',}],
        })(<Radio.Group buttonStyle="solid">
            <Radio value={'public'}>公开模式</Radio>
            <Radio value={'private'}>私有模式</Radio>
            {/* {common.selectOption && TsxHelper.buildRadioOption(common.selectOption)} */}
          </Radio.Group>
        )}
      </FormItem>
    </Col>
    </Row>

    {
      form.getFieldValue('site_mode') == 'private' && 
      <Row>
        <Col span={24} style={{display: 'flex', justifyContent: 'center',marginLeft: '2.17%'}}>
          <Card title={<FormattedMessage id="private_mode_setting" />} headStyle={{color: "#dc3545"}} type="inner"  style={{width: "62.5%"}}>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="site_private_type" />
                <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="关闭后，任何人不可注册加入，不影响已有账号的使用者" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em>
              </span>
            }
            >
              {form.getFieldDecorator('site_private_close', {
                initialValue: parseData('site_private_close',dataFormValues),
                // rules: [{ required: true, message: '请选择！',}],
              })(<Radio.Group buttonStyle="solid">
                  <Radio value={'private'}>关闭</Radio>
                  <Radio value={'public'}>开放</Radio>
                  {/* {common.selectOption && TsxHelper.buildRadioOption(common.selectOption)} */}
                </Radio.Group>
              )}
            </FormItem>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="site_private_plugin" />
                {/* <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="加入通道由哪个插件提供支持" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em> */}
              </span>
            }
             >
              {form.getFieldDecorator('site_private_service', {
                initialValue: parseData('site_private_service',dataFormValues),
                //  rules: [{ required: true, message: '请选择！',}],
              })(<Select placeholder={'加入通道由哪个插件提供支持'} size={'default'} style={{ width: '100%' }}>
                {common.sitePrivatePluginOption  && TsxHelper.buildSelectOption(common.sitePrivatePluginOption)}
              </Select>)}
            </FormItem>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="site_private_end" />
                {/* <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="到期时间记录在用户资料里，不受插件影响，可自由更换插件" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em> */}
              </span>
            }>
              {form.getFieldDecorator('site_private_end', {
                initialValue: parseData('site_private_end',dataFormValues),
                //  rules: [{ required: true, message: '请选择！',}],
              })(<Select placeholder={'到期时间记录在用户资料里，不受插件影响，可自由更换插件'} size={'default'} style={{ width: '100%' }}>
                {common.sitePrivateEndOption  && TsxHelper.buildSelectOption(common.sitePrivateEndOption)}
              </Select>)}
            </FormItem>
          </Card>
        </Col>
      </Row>
    }
    {
      form.getFieldValue('site_mode') == 'public' && 
      <Row>
        <Col span={24} style={{display: 'flex', justifyContent: 'center',marginLeft: '2.17%'}}>
          <Card title={<FormattedMessage id="公开模式配置" />} headStyle={{color: "#198754"}} type="inner"  style={{width: "62.5%"}}>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="是否开放注册" />
                <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="关闭后，任何人不可注册加入，不影响已有账号的使用者" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em>
              </span>
            }
            >
              {form.getFieldDecorator('site_public_close', {
                initialValue: parseData('site_public_close',dataFormValues),
              })(<Radio.Group buttonStyle="solid">
                  <Radio value={false}>关闭注册</Radio>
                  <Radio value={true}>开放注册</Radio>
                </Radio.Group>
              )}
            </FormItem>
            <FormItem labelCol={{span: 7}} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="注册功能配置" />
              </span>
            }
             >
              {form.getFieldDecorator('site_public_service', {
                initialValue: parseData('site_public_service',dataFormValues),
                //  rules: [{ required: true, message: '请选择！',}],
              })(<Select placeholder={''} size={'default'} style={{ width: '100%' }}>
                {common.registerOption  && TsxHelper.buildSelectOption(common.registerOption)}
              </Select>)}
            </FormItem>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="注册账号支持" />
              </span>
            }>
              {form.getFieldDecorator('register_selected', {
                initialValue: [parseData('site_register_email',dataFormValues) == true ? 'site_register_email':'', parseData('site_register_phone',dataFormValues) == true ? 'site_register_phone':''],
              })(<Checkbox.Group  onChange={(list)=>{console.log(list)}}>
              <Checkbox value={'site_register_email'}>邮箱注册</Checkbox>
              <Checkbox value={'site_register_phone'}>手机号注册</Checkbox>
            </Checkbox.Group>)}
            </FormItem>
          </Card>
        </Col>
      </Row>
    }

    
    {/* <Row>
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 0}}
      label={
        <span>
          <FormattedMessage id="site_china_mode" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="站点服务器是否部署在中国大陆境内" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
      }>
        {form.getFieldDecorator('site_china', {
          initialValue: parseData('site_china',dataFormValues) || false,
          // rules: [{ required: true, message: '请选择！',}],
        })(<Radio.Group buttonStyle="solid">
            <Radio value={false}>否</Radio>
            <Radio value={true}>是</Radio>
          </Radio.Group>
        )}
      </FormItem>
    </Col>
    </Row> */}
    {
      form.getFieldValue('site_china') == true && 
      <Row>
        <Col span={24} style={{display: 'flex', justifyContent: 'center',marginLeft: '2.17%'}}>
          <Card title="中国大陆服务器配置（非必填项）" type="inner"  style={{width: "62.5%"}}>
            
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
             label={
               <>
              {/* <a href="https://beian.miit.gov.cn" target="_blank" style={{color: "rgba(0, 0, 0, 0.85)"}}> */}
                <FormattedMessage id="site_miit_beian" />
                <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="https://beian.miit.gov.cn" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em>
              {/* </a> */}
              </>
            }
             >
              {form.getFieldDecorator('site_miit_beian', {
                initialValue: parseData('site_miit_beian',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Input placeholder={''}/>)}
              {/* <a href="https://beian.miit.gov.cn" target="_blank">https://beian.miit.gov.cn</a> */}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
             label={
               <>
              {/* <a href="https://tsm.miit.gov.cn" target="_blank" style={{color: "rgba(0, 0, 0, 0.85)"}}> */}
                <FormattedMessage id="site_miit_tsm" />
                <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="https://tsm.miit.gov.cn" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em>
              {/* </a> */}
              </>
            }>
             
              {form.getFieldDecorator('site_miit_tsm', {
                initialValue: parseData('site_miit_tsm',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Input placeholder={''}/>)}
              {/* <a href="https://tsm.miit.gov.cn" target="_blank">https://tsm.miit.gov.cn</a> */}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
             label={
               <>
              {/* <a href="http://www.beian.gov.cn" target="_blank" style={{color: "rgba(0, 0, 0, 0.85)"}}> */}
                <FormattedMessage id="site_miit_gongan" />
                <em className={styles.optional}  >
                  <Tooltip title={<FormattedMessage id="http://www.beian.gov.cn" />} >
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em>
              {/* </a> */}
              </>
            }
             >
              {form.getFieldDecorator('site_miit_gongan', {
                initialValue: parseData('site_miit_gongan',dataFormValues),
                // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
              })(<Input placeholder={''}/>)}
              {/* <a href="http://www.beian.gov.cn" target="_blank">http://www.beian.gov.cn</a> */}
            </FormItem>
          </Card>
        </Col>
      </Row>
    }

    {/* <Row style={{marginTop:15}}>
      <Col span={24}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
        label={
          <span>
            <FormattedMessage id="site_stat_code" />
          </span>
        }
         >
          {form.getFieldDecorator('site_stat_code', {
            initialValue: parseData('site_stat_code',dataFormValues),
          })(<TextArea rows={2} placeholder={'第三方统计代码（禁止使用含有 document.write 的统计代码）仅网页端有效'} />)}
        </FormItem>
      </Col>
    </Row> */}

    {/* <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="site_close" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="暂时将网站关闭，其他人无法访问，但不影响管理员访问" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
      }
      >
        {form.getFieldDecorator('site_close', {
          initialValue: parseData('site_close',dataFormValues) || true,
        })(<Radio.Group buttonStyle="solid">
            <Radio value={true}>正常运行</Radio>
            <Radio value={false}>暂时关闭</Radio>
          </Radio.Group>
        )}
      </FormItem>
    </Col> */}
    {/* {
      form.getFieldValue('site_close') == false &&
      <Col span={24}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
        label={
          <span>
            <FormattedMessage id="site_close_msg" />
          </span>
        }
        >
          {form.getFieldDecorator('site_close_msg', {
            initialValue: siteclosemsgJson.length>0?siteclosemsgJson[0].lang_content:'',
          })(<TextArea rows={2} placeholder={'站点关闭时出现的提示信息'} style={{cursor:"pointer"}} readOnly onClick={() => {
            setFieldTitle('site_close_msg');
            if(siteclosemsgJson && siteclosemsgJson.length>0){
              setnameList(siteclosemsgJson);
            }else{
              console.log(32,common.languagesOption)
              setnameList(common.languagesOption);
            }
            handleDataModalVisible(true);
           }}/>)}
        </FormItem>
      </Col>
    } */}
    <Col span={24}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={okHandle} >提交保存</Button>
      </div>
    </Col>
    {
      previewModelVisible && (
        <PreviewForm
          previewModelVisible={previewModelVisible}
          onVisibleModel={handlePreviewModalVisible}
          previewImg={previewImg}
        />
      )
    }
    <DataLang
        dataModalVisible={dataLangModalVisible}
        isUpdate={isUpdate}
        dataFormValues={dataFormValues}
        common={common || {}}
        // name={modalName}
        nameList={nameListLang}
        title={fieldTitle}
        onSubmit={handleSubmitDataForm}
        onCancel={() => handleDataModalVisible(false)}
    />
  </Card>;
};

export default Form.create<DataFormProps>()(DataForm);
